<div class="container">
    <div class="row">

        <!--<div class="col-sm-12">
            <header class="title">
                <h4>我要充值</h4>
            </header>
        </div>
        <div class="col-sm-12 col-xs-12" style="height: 45px;"></div>-->

        {{> "yiweixin/navbar" }} <!-- 导航栏nav end-->

        <!-- 这里是页面内容区 -->
        <div class="col-sm-12 col-xs-12">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox" id="banner">

                    {{#each banners}}
                        <div class="item">
                            <img src="{{ image }}" alt="...">
                        </div>
                    {{/each}}

                    <!-- Controls -->
                    <a class="left carousel-control controll-slider" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control controll-slider" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
            </div>

            <div class="col-sm-12 col-xs-12" style="height: 50px;"></div>

            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon i-phone"><i class="glyphicon glyphicon-phone"></i></div>
                    <input type="text" class="form-control" placeholder="请输入充值号码" id="phoneNumber">
                </div>
            </div>
            <!--积分-->
            <div class="jifen">
                <span style="font-size: 14px">您有{{ customer.totalIntegral  }}流量币，使用流量币</span>
                <label>
                    <input type="checkbox" class="ios-switch tinyswitch" checked/>
                    <div>
                        <div></div>
                    </div>
                </label>
                <p style="color:red">购买扣减流量币，若充值失败  自动退回流量币，100流量币可抵1元</p>
            </div>
        </div>
        <!--search end-->
        <br>
        <br>
        <div  id="traffic"><h4>赶快输入手机号查看套餐</h4> </div><!-- 流量分组及套餐  end-->
<!--        <div class="col-sm-4 col-xs-4 col-md-3">
            <div class="cell">
                <h5>150M</h5>
                <p>￥19</p>
                <span>赠送 流量币</span>
            </div>
        </div>-->
        <div class="col-sm-12 col-xs-12" style="height: 50px;"></div>
    </div>
    <!--row end-->
</div>
<!-- 流量详情模态框（Modal） -->
<style>

</style>
<div class="modal fade" id="alert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div><!--模态框 end-->

<div class="modal fade" id="detail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="detail-title">流量详情</h4>
            </div>
            <div class="modal-body">
                <textarea disabled="disabled"  rows="18" style="width: 98%; background: white; color: red" ></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div><!--模态框 end-->

<script id="trafficplans-template" type="text/x-handlebars-template">
    \{{#each trafficgroups}}
    <div class="col-sm-12 col-xs-12" style="height: 10px;"></div>
    <!--流量币 end-->
    <div class="col-sm-12 col-xs-12">
        <div class="alert alert-success tips">
            <span>\{{ name }}</span>
            <p style="display: none">\{{ info }}</p>
            <a data-toggle="modal" data-target="#detail" class="info tips-right"><i class="glyphicon glyphicon-question-sign"></i> 流量详情</a>
        </div>
        \{{#each trafficplans}}
        <div class="col-sm-4 col-xs-4 col-md-3">
            <a helf="#" class="exchanger" data-value="\{{id}}">
                <div class="cell">
                    \{{#if tip}}
                    <div class="extra"></div>
                    <small class="extra-font">\{{ tip }}</small>
                    \{{/if}}
                    <h4>\{{name}}</h4>
                    <p>￥\{{ cost }}</p>
                    <div><span style="font-size:14px">赠送 \{{integral}} 流量币</span></div>
                </div>
            </a>
        </div>
        \{{/each}}
    </div>
    \{{/each}}

    \{{#if trafficgroups}}
    \{{else}}
    <h4>没有与你的手机号对应的套餐</h4>
    \{{/if}}
</script>